<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html>
<html lang="UTF-8">
<head>
  <%@include file="/WEB-INF/include-head.jsp" %>
  <link rel="stylesheet" href="ztree/zTreeStyle.css">
  <script type="text/javascript" src="ztree/jquery.ztree.all-3.5.min.js"></script>
  <script src="script/myrole.js"></script>
</head>

 <body>
<script type="text/javascript">
$(function(){
	 initPage();
	 showRolePage();
	 //查询
	 $("#subform").click(function(){
	  window.keyWord = $.trim($("#keyWord").val());
	  showRolePage();
	 });
	
	 //--------------------------------------------------------删除---------------------------------------------------//
	
	 /* //单个删除  针对动态生成的class等标签，不可如下这样--->在myrole。js文件中生成的
	 $(".sindel").click(function(){
		 alert("xxx");
		 var roleid=$(this).attr("roleid");
		 var roleidList=new Array();
		 roleidList.push(roleid);
		 batchRemove(roleidList);
	 }); */
	// 针对.sindel这样动态生成的元素对象使用on()函数方式绑定单击响应函数
	// $("动态元素所依附的静态元素").on("事件类型","具体要绑定事件的动态元素的选择器", 事件响应函数);
	 $("#tbody").on("click",".sindel", function(){
		// 获取当前记录的roleId
		 var roleid = $(this).attr("roleid");
		
		 var roleid=$(this).attr("roleid");
		 var roleidList=new Array();
		 roleidList.push(roleid);
		 batchRemove(roleidList);
		});
	 
	 //多选框删除
	 //全选
	 $("#checkall").click(function(){
		//获取多选框勾选状态，this是当前对象（DOM）
			var checkStatu=this.checked;
			//将多选狂状态设置给各个单选狂
			$(".itembox").prop("checked",checkStatu);
	 });
	 $("#batchdel").click(function(){
			var roleidList=new Array();
			//定位到单选框(itembox标签)，遍历所有该标签的单选框,加上：checked属性表示只遍历选择过的单选框
			$(".itembox:checked").each(function(){
				//获取roleid的值，自己定义的属性，只有用jqury方法才能使用
				var roleid=$(this).attr("roleid");
				//使用数组push方法将值放入数组
				roleidList.push(roleid);
			})
			//调用删除方法--myrole.js
			batchRemove(roleidList);
	 });

	 //-------------------------------------------------------更新---------------------------------------------------//
	
	 //更新如上例单个删除那样，因为表格内容是动态生成的，所以(class)不能用简单的$(".class").click()方法来触发,需用具有唯一ID的父元素来触发
	 $("#tbody").on("click",".editRole",function(){
		//1、获取当前数据ID
		//var roleid=$(this).attr("roleid");//自定义标签
		window.roleid=$(this).attr("roleid");//设成全局变量，为了在另外的方法使用。
		//2.获取当前按钮所在行的roleName
		var rolename = $(this).parents("tr").children("td:eq(2)").text();
		//3、给编辑模态框的角色名输入框赋值
		$("#roleNameInputEdit").val(rolename);
		//4、显示编辑模态框
		$("#editModal").modal("show");
	 });
	 //编辑模态框更新按钮触发事件
	 $("#editModalBtn").click(function(){
		 //1、获取输入框值$.trim()方法去掉前后空格
		 var rolename=$.trim($("#roleNameInputEdit").val());
		 if(rolename==null || rolename==""){
			 layer.msg("角色名不合法");//layer弹层组件
			 return ;
		 }
		 //2、发送ajax请求
		 $.ajax({
			"url":"role/update.json",
			"type":"post",
			"data":{
				 "id":window.roleid,
				 "name":rolename
			 },
		 	 "dataType":"json",
		 	 "success":function(response){
		 		 var result=response.result;
		 		 if(result=="SUCCESS"){
		 			 layer.msg("更新成功");
		 			 //重新展示分页
		 			showRolePage();
		 		 }else
		 			layer.msg("更新失败:"+response.message);
		 		 
		 		$("#editModal").modal("hide");//成功失败都关闭模态框
		 	 }
		 });
	 })
	 
	 //-------------------------------------------------------增加---------------------------------------------------//
	 $("#addBtn").click(function(){
		 $("#addModal").modal("show");
	 });
	 $("#addModalBtn").click(function(){
		 var rolename=$.trim($("#roleNameInputAdd").val());
		 if(rolename==null || rolename==""){
			 layer.msg("角色名不合法");//layer弹层组件
			 return ;
		 }
		 $.ajax({
			 "url":"role/add.json",
			 "type":"post",
			 "data":{
				 "name":rolename
			 },
			 "dataType":"json",
			 "success":function(response){
				var result=response.result;
				if(result=="SUCCESS"){
					layer.msg("添加成功");
					//重新展示分页
		 			showRolePage();
				}else
					layer.msg("更新失败");
			 $("#addModal").modal("hide");//成功失败都关闭模态框
			 }
		 });
	 });
	 
	//--------------------------------------------给角色赋权限---------------------------------------------------------------//
	$("#tbody").on("click",".editAuth",function(){
		
		//设置ZTre环境
		var setting = {
				"data": {
					"simpleData": {
						enable: true,
						pIdKey:"categoryId"
					},
					"key":{
						name:"title",
					}
				},
				"check":{
					"enable": true
				}
				
			};
		
		//ajax获取权限数据，构造ZTree树简单结构
		var ztreedata=$.ajax({
			"url":"auth/get/all.json",
			"type":"post",
			"dataType":"json",
/* 			"success":function(req){
				var data=req.data;
				$.fn.zTree.init($("#treeDemo"), setting, data);
				$.fn.zTree.getZTreeObj("treeDemo").expandAll(true);
			} */
			"async": false//设置为异步，一般ajax用与赋值时用。
		});
		
		var zNode=ztreedata.responseJSON.data;//responseJSON是ajax固定属性，data是后端自己定义的返回值属性
		
		$.fn.zTree.init($("#treeDemo"), setting, zNode);
		$.fn.zTree.getZTreeObj("treeDemo").expandAll(true);
		
		//展示模态框
		 $("#authModal").modal("show");
		
		//显示角色已具有的权限，将其勾选
		//1、获取角色id
		window.roleid= $(this).attr("roleid");//jq自定义标签，得到当前按钮的roleid属性值
		//2、后端查询数据
		var ajaxresult=$.ajax({
			"url":"auth/get/roleauth.json",
			"type":"post",
			"data":{
				"roleid":roleid
				},
			"dataType":"json",
			"async": false//设置为异步，一般ajax用与赋值时用。
		});
		//角色已有的权限数据
		var roleauth=ajaxresult.responseJSON.data;
		//3、循环遍历权限树，将角色已有的权限勾选。使用ZTree有勾选方法$.fn.zTree.getZTreeObj("treeDemo").checkNode(treeNode, true, false);
		// ①遍历roleauth
		for (var i = 0; i < roleauth.length; i++) {
			// ②在遍历过程中获取每一个authId
			var authId = roleauth[i].id;
			
			// ③根据authId查询到一个具体的树形节点
			// key：查询节点的属性名
			// value：查询节点的属性值，这里使用authId
			var key = "id";
			
			var treeNode = $.fn.zTree.getZTreeObj("treeDemo").getNodeByParam(key, authId);
			
			// ④勾选找到的节点
			// treeNode：当前要勾选的节点
			// true：表示设置为勾选状态
			// false：表示不联动
			$.fn.zTree.getZTreeObj("treeDemo").checkNode(treeNode, true, false);
			
		}
		
	 });
	
	//---------------------------------------执行分配-------------------------------------------------------------
	//分配按钮单选函数
	$("#assignBtn").click(function(){
		//获取ZTree勾选的数据(是一个数组)
		var ztreeCheck= $.fn.zTree.getZTreeObj("treeDemo").getCheckedNodes();
		console.log(ztreeCheck);
		
		//用数组存储权限ID，用map存储角色id和勾选的权限IDlist
		var authIdList = new Array();
		
		//循环获取id
		for(var i=0;i<ztreeCheck.length;i++){
			if(ztreeCheck[i].categoryId!=null){
				var authid=ztreeCheck[i].id;
				authIdList.push(authid);
			}
		}
		
		var requestBody = {
				"roleid":[window.roleid],//建议用数组存储，后端方便解析
				"authIdList":authIdList
			};
		
		//发送ajax请求
		$.ajax({
			"contentType": "application/json;charset=UTF-8",//后端使用@RequestBody接收参数要设置成这样,
			"url":"auth/assignauth.json",
			"type":"post",
			"data":JSON.stringify(requestBody),
			/* {
				"roleid":window.roleid,//application/json格式，不可以用这种传递
				"authIdList":authIdList
			}, */
			"dataType":"json",
			"success":function(req){
				var result = req.result;
				if(result="SUCCESS"){
					layer.msg("分配成功");
				}else
					layer.msg("分配失败");
			},
			"error":function(req){
				layer.msg("连接失败");
			}
			
		});
		
	});
	 
}); 
</script>
	<!-- nav -->
	<%@include file="/WEB-INF/include-nav.jsp" %>
    <div class="container-fluid">
      <div class="row">
        <%@include file="/WEB-INF/include-sidebar.jsp" %>
        <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
			<div class="panel panel-default">
				<div class="panel-heading">
				<h3 class="panel-title"><i class="glyphicon glyphicon-th"></i> 数据列表</h3>
				</div>
				<div class="panel-body">
					<form  class="form-inline" role="form" style="float:left;">
					 	<div class="form-group has-feedback">
							<div class="input-group">
						  		<div class="input-group-addon">查询条件</div>
						  		<input id="keyWord" name="keyWord" class="form-control has-success" type="text" placeholder="请输入查询条件">
							</div>
					  	</div>
					  	<button id="subform" type="button" class="btn btn-warning"><i class="glyphicon glyphicon-search"></i> 查询</button>
					</form>
					<button id="batchdel" type="button" class="btn btn-danger" style="float:right;margin-left:10px;"><i class=" glyphicon glyphicon-remove"></i> 删除</button>
					<button id="addBtn" type="button" class="btn btn-primary" style="float:right;"><i class="glyphicon glyphicon-plus"></i> 新增</button>
					<br>
					<hr style="clear:both;">
					<div class="table-responsive">
						<table class="table  table-bordered">
						  <thead>
							<tr >
							  <th width="30">#</th>
							  <th width="30"><input id="checkall" type="checkbox"></th>
							  <th>名称</th>
							  <th width="100">操作</th>
							</tr>
						  </thead>
						  <tbody id="tbody">
							<!--动态生成表格  -->
						 </tbody>
						  <tfoot>
							 <tr >
								 <td colspan="6" align="center">
									<div id="Pagination" class="pagination">
											<!-- 这里显示分页页码 -->
									</div>
								 </td>
							 </tr>
			
						  </tfoot>
						</table>
					</div>
				</div>
			</div>
        </div>
      </div>
    </div>
<!-- 添加与编辑的模态狂 -->
<%@ include file="/WEB-INF/include-modal-editRole.jsp" %>
<%@ include file="/WEB-INF/include-modal-addRole.jsp" %>
<%@ include file="/WEB-INF/include-modal-auth.jsp" %>
  </body>
</html>